﻿<!DOCTYPE html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>购物车页面</title>
    <th:block th:insert="~{front/include::head}"></th:block>
    <script th:inline="javascript">
        let cartItems =/*[[${cartItems}]]*/{};//取出购物车项
    </script>
</head>

<body>
<header th:replace="~{front/include::header}"></header>
<main class="main">
    <div class="page-header breadcrumb-wrap">
        <div class="container">
            <div class="breadcrumb">
                <a th:href="@{/vm/front/index}" rel="nofollow">主页</a>
                <span></span> 购物
                <span></span> 购物车
            </div>
        </div>
    </div>
    <section class="mt-50 mb-50">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="table-responsive">
                        <table class="table shopping-summery text-center clean">
                            <thead>
                            <tr class="main-heading">
                                <th scope="col"><input type="checkbox" id="check-all"></th>
                                <th scope="col">商品图</th>
                                <th scope="col">商品名称</th>
                                <th scope="col">价格</th>
                                <th scope="col">数量</th>
                                <th scope="col">总价</th>
                                <th scope="col">移除</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="ci:${cartItems}" th:data-goods-id="${ci.goodsId}" th:data-cid="${ci.id}">
                                <td ><input type="checkbox"></td>
                                <td class="image"><img th:src="@{/assets/{url}(url=${ci.goods.pic})}" alt="#">
                                </td>
                                <td class="product-des">
                                    <h5 class="product-name">
                                        <a  th:text="${ci.goods.name}"
                                            th:href="@{/vm/front/goods/detail(goodsId=${ci.goodsId})}"></a>
                                    </h5>
                                    <p class="font-xs" th:text="${ci.goods.summary==null?'暂无':ci.goods.summary}">
                                    </p>
                                </td>
                                <td class="price">
                                    <span class="item_price" th:text="'$'+${ci.goods.price}">$4.00</span>
                                </td>
                                <td class="text-center" data-title="Stock">
                                    <div class="detail-qty border radius  m-auto">
                                        <a href="#" class="qty-down" title="-"><i class="fi-rs-angle-small-down"></i></a>
                                        <span class="qty-val" th:text="${ci.quantity}"></span>
                                        <a href="#" class="qty-up" title="+">
                                            <i class="fi-rs-angle-small-up"></i>
                                        </a>
                                    </div>
                                </td>
                                <td class="text-right">
                                    <span class="item_total_price" th:text="'$'+${ci.quantity*ci.goods.price}">$65.00</span>
                                </td>
                                <td class="action" data-title="remove"><a href="#" class="text-muted"><i
                                        class="fi-rs-trash"></i></a></td>
                            </tr>

                            <tr>
                                <td colspan="6" class="text-end">
                                    <a href="#" class="text-muted" data-title="remove-check">
                                        <i class="fi-rs-cross-small"></i>清除选中购物项
                                    </a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="cart-action text-end">
                        <a class="btn  mr-10 mb-sm-15"><i class="fi-rs-shuffle mr-10"></i>刷新购物车</a>
                        <a class="btn " th:href="@{/vm/front/goods/grid}">
                            <i class="fi-rs-shopping-bag mr-10"></i>继续购物
                        </a>
                    </div>
                    <div class="divider center_icon mt-50 mb-50"><i class="fi-rs-fingerprint"></i></div>
                    <div class="row mb-50">
                        <div class="col-lg-6 col-md-12">
                            <div class="heading_s1 mb-3">
                                <h4>计算运费</h4>
                            </div>
                            <p class="mt-15 mb-30">固定费率: <span class="font-xl text-brand fw-900">5%</span></p>
                            <form class="field_form shipping_calculator">
                                <div class="form-row">
                                    <div class="form-group col-lg-12">
                                        <div class="custom_select">
                                            <select class="form-control select-active">
                                                <option value="">选择国家...</option>
                                                <option value="AX">Aland Islands</option>
                                                <option value="AF">Afghanistan</option>
                                                <option value="BM">Bermuda</option>
                                                <option value="BT">Bhutan</option>
                                                <option value="BI">Burundi</option>
                                                <option value="CA">Canada</option>
                                                <option value="CV">Cape Verde</option>
                                                <option value="CL">Chile</option>
                                                <option value="CN">China</option>
                                                <option value="CX">Christmas Island</option>
                                                <option value="DM">Dominica</option>
                                                <option value="DO">Dominican Republic</option>
                                                <option value="EC">Ecuador</option>
                                                <option value="EG">Egypt</option>
                                                <option value="SV">El Salvador</option>
                                                <option value="FR">France</option>
                                                <option value="GF">French Guiana</option>
                                                <option value="PF">French Polynesia</option>
                                                <option value="HN">Honduras</option>
                                                <option value="HK">Hong Kong</option>
                                                <option value="HU">Hungary</option>
                                                <option value="IS">Iceland</option>
                                                <option value="IN">India</option>
                                                <option value="LA">Laos</option>
                                                <option value="NZ">New Zealand</option>
                                                <option value="PY">Paraguay</option>
                                                <option value="PE">Peru</option>
                                                <option value="PN">Pitcairn</option>
                                                <option value="PL">Poland</option>
                                                <option value="PT">Portugal</option>
                                                <option value="RO">Romania</option>
                                                <option value="RU">Russia</option>
                                                <option value="RW">Rwanda</option>
                                                <option value="SM">San Marino</option>
                                                <option value="SO">Somalia</option>
                                                <option value="ZA">South Africa</option>
                                                <option value="GS">South Georgia/Sandwich Islands</option>
                                                >
                                                <option value="SE">Sweden</option>
                                                <option value="CH">Switzerland</option>
                                                <option value="US">USA (US)</option>
                                                <option value="YE">Yemen</option>
                                                <option value="ZM">Zambia</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-row row">
                                    <div class="form-group col-lg-6">
                                        <input required="required" placeholder="地区 / 国家" name="name" type="text">
                                    </div>
                                    <div class="form-group col-lg-6">
                                        <input required="required" placeholder="邮政编码" name="name" type="text">
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-lg-12">
                                        <button class="btn  btn-sm"><i class="fi-rs-shuffle mr-10"></i>更新</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="col-lg-6 col-md-12">
                            <div class="border p-md-4 p-30 border-radius cart-totals">
                                <div class="heading_s1 mb-3">
                                    <h4>购物车总价</h4>
                                </div>
                                <div class="table-responsive">
                                    <table class="table">
                                        <tbody>
                                        <tr>
                                            <td class="cart_total_label">商品总价</td>
                                            <td class="cart_total_price"><span class="font-lg fw-900 text-brand">$0</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="cart_total_label">运费</td>
                                            <td class="cart_total_amount"><i class="ti-gift mr-5"></i> 免运费
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="cart_total_label">总价</td>
                                            <td class="cart_total_price"><strong><span
                                                    class="font-xl fw-900 text-brand">$0</span></strong></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <a th:href="@{/vm/front/shop/checkout}" class="btn" id="checkout-btn">
                                    <i class="fi-rs-box-alt mr-10"></i>
                                    点击提交购物车
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
<footer th:replace="~{front/include::footer}"></footer>
<!--加载器-->
<div th:insert="~{front/include::loader}"></div>
<div th:insert="~{front/include::scripts}"></div>
<script th:src="@{/assets/front/js/shop/cart.js}"></script>
</body>

</html>